<template>
  <div class="repair_report_list">
    <Row type="flex" justify="space-between" class="repair_report_listt-edit">
      <Form class="from" style="width: 100%" label-position="left" inline>
        <Row type="flex" justify="space-between">
          <Row>
            <FormItem :label-width="72">
              <div slot="label" style="transform: translateX(12px);">门店名称：</div>
              <!--  moms:assets:machineconfigview -->
              <vueTreeselectChoice
                :multiple="true"
                ref="vueTreeselectChoice"
                @input="handleShop"
                @on-api-finish="apiFinish"
                permissionCode="moms:assets:machineconfigview"
                v-model="ShopValue"
              ></vueTreeselectChoice>
            </FormItem>

            <FormItem :label-width="72">
              <div slot="label" style="transform: translateX(12px);">机台分类：</div>
              <Select
                class="select-shop-item"
                @on-change="search"
                v-model="searchObj.machineCategoryId"
                :max-tag-count="1"
                style="width:180px"
              >
                <Option
                  v-for="(item ,index) in machineList"
                  :key="index"
                  :value="item.machineCategoryId"
                >{{ item.name }}</Option>
              </Select>
            </FormItem>
            <FormItem :label-width="72">
              <div slot="label" style="transform: translateX(12px);">时间选择：</div>
              <DatePicker
                v-model="searchObj.date"
                @on-change="search"
                type="date"
                :options="dateOption"
                format="yyyy-MM-dd"
                placement="bottom-end"
                placeholder="请选择时间"
                style="width: 180px"
              ></DatePicker>
            </FormItem>
            <FormItem>
              <Button class="search-btn" @click="search" type="primary">查询</Button>
            </FormItem>
            <FormItem>
              <Button class="search-btn" @click="handleReset">重置</Button>
            </FormItem>
          </Row>
          <Row>
            <FormItem>
              <Button
                @click="handleExport"
                v-if="hasPermission('moms:assets:machineconfigexport')"
                type="primary"
              >批量导出</Button>
            </FormItem>
          </Row>
        </Row>
      </Form>
    </Row>
    <Table
      :max-height="resData.length > 10 ? 530 : 0"
      :loading="isloading"
      stripe
      :columns="columns"
      :data="resData"
      class="table-list"
    ></Table>
    <div class="page-box">
      <Page
        :total="total"
        ref="pages"
        :current.sync="searchObj.pageIndex"
        :page-size="searchObj.limit"
        @on-change="_handlePage"
        @on-page-size-change="_handlePageSize"
        show-sizer
        show-total
      />
    </div>
  </div>
</template>

<script>
import { getShopList } from '@/api/system/store'
import { getReportList, reportExport } from '@/api/asset/repair/report'
import commonFrom from '@/mixins/commonFrom'
import { machineCategoryList } from '@/api/setting'
import dayjs from 'dayjs'
import { blobToXls } from '@/libs/blobToXls'
import vueTreeselectChoice from '@/components/vue-treeselect-choice'
export default {
  name: 'repair_report_list',
  components: { vueTreeselectChoice },
  mixins: [commonFrom],
  data () {
    return {
      searchObj: {
        merchantId: this.$store.state.user.merchantId,
        // refName: '',
        // status: -1,
        // pageIndex: 1,
        shopId: [],
        machineCategoryId: -1,
        date: new Date(),
        limit: 10,
        offset: 0
      },
      dateOption: {
        disabledDate: date => {
          return dayjs(date).isAfter(dayjs(new Date()))
        }
      },
      //  _apiFunction: getReportList,
      shopList: [],
      machineList: [{ machineCategoryId: -1, name: '全部' }],
      statusOption: [],
      isloading: false,
      ShopValue: [],
      // resData: [{}],
      columns: [
        {
          type: 'index',

          title: '序号',
          align: 'center'
        },
        { title: '门店名称', key: 'shopName', align: 'center' },
        { title: '机台分类', key: 'machineCategoryName', align: 'center' },
        { title: '机台名称', key: 'machineInstanceName', align: 'center' },
        { title: '游戏位', key: 'machineInstanceSlotNo', align: 'center' },
        { title: '固定中奖率', key: 'persistentWinningPer', align: 'center' },
        { title: '机台分组', key: 'winningGroup', align: 'center' },
        { title: '强电压', key: 'highVoltage', align: 'center' },
        { title: '强电压延时', key: 'highVoltageDelay', align: 'center' },
        { title: '下爪延时', key: 'actionDelay', align: 'center' },
        { title: '放线长度', key: 'ropeLength', align: 'center' },
        { title: '天车速度', key: 'crownBlockSpeed', align: 'center' },
        { title: '礼品掉落', key: 'giftCounter', align: 'center' },
        { title: '上报时间', key: 'createTime', align: 'center' },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          render: (h, params) => {
            if (params.row.status === 0) return null
            return h('div', [
              h('i', {
                class: ['iconsys', 'icondetail'],
                attr: { title: '查看详情' },
                on: {
                  click: () => {
                    // console.log(params.row)
                    sessionStorage.setItem('repair_report_detail_data', JSON.stringify(params.row))
                    this.$router.push({ name: 'repair_report_detail' })

                    // this.errorsList = params.row.errors
                    // this.modalMachineShow = true
                  }
                }
              })
            ])
          }
        }
      ]
    }
  },
  created () {
    this._apiFunction = getReportList
    this.getShopList()
    this.machineCategoryList()
  },
  methods: {
    maxTagPlaceholder (num) {
      return '...'
    },
    search () {
      this._search()
    },
    async handleShop () {
      const ids = await this.$refs.vueTreeselectChoice.getShopId()
      this.searchObj.shopId = ids
      this._search()
    },
    async apiFinish (isId) {
      if (isId) this.ShopValue = [this.$store.state.user.orgId]
    },
    _before (data) {
      // if (data) {
      //   data.
      // }
      // return { 'merchantId': 'dwj', 'date': '2019-10-17 00:00:00', 'limit': this.searchObj.limit, 'offset': this.searchObj.offset }

      return {
        ...data,
        machineCategoryId: data.machineCategoryId === -1 ? '' : data.machineCategoryId,
        date: dayjs(data.date).isValid() ? dayjs(data.date).format('YYYY-MM-DD 00:00:00') : '',
        shopId: data.shopId.join(',')
      }
    },
    // 导出
    async handleExport () {
      const res = await reportExport({
        ...this.searchObj,
        machineCategoryId: this.searchObj.machineCategoryId === -1 ? '' : this.searchObj.machineCategoryId,
        date: dayjs(this.searchObj.date).isValid() ? dayjs(this.searchObj.date).format('YYYY-MM-DD 00:00:00') : '',
        shopId: this.searchObj.shopId.join(',')
      })
      console.log(res)
      // if (res.data.status !== 200) return this.$Message.error(res.data.error)
      blobToXls(res.data, `机台程序上报表(${dayjs(this.searchObj.date).format('YYYY-MM-DD')})`)
    },
    handleReset () {
      this.searchObj = {
        merchantId: this.$store.state.user.merchantId,
        shopId: [this.$store.state.user.merchantId],
        machineCategoryId: -1,
        date: new Date(),
        limit: 10,
        offset: 0
      }
      this.search()
    },
    _after (data) {
      data.forEach(item => {
        if (item.settings) {
          Object.assign(item, JSON.parse(item.settings))
        }
      })
      return data
    },
    async getShopList () {
      const res = await getShopList({
        permissionCode: 'moms:assets:machineconfigview', // 查看普通订单
        merchantId: this.$store.state.user.merchantId, // 商户id
        offset: 0,
        limit: 9999
      })
      if (res.data.status !== 200) return this.$Message.error(res.data.error)
      this.shopList = res.data.data
    },
    async machineCategoryList () {
      const res = await machineCategoryList({
        // 'dwj' ||
        merchantId: this.$store.state.user.merchantId // 商户id
      })
      if (res.data.status !== 200) return this.$Message.error(res.data.error)
      this.machineList = res.data.data || []
    }
  }
}
</script>
<style lang="less" scoped>
.repair_report_list {
  .repair_report_listt-edit {
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: -4px;
  }
  .search-btn {
    width: 80px;
  }
}
</style>
<style lang="less">
.repair_report_list {
  .select-shop-item {
    height: 35px;
    width: 210px;
    .ivu-select-selection {
      height: 35px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .ivu-tag {
      max-width: 100px;
    }
  }
}
</style>
